
<!DOCTYPE html public>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

    <link href="css/styleSliders.css" rel="stylesheet" type="text/css" ></img>
    <link href="css/styleTrafficSimulationDe.css" 
          rel="stylesheet" type="text/css"></img>
    <link rel="shortcut icon" type="image/jpg" href="./favicon.jpg">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js">
    </script>

    
    <title>Intersection</title> 
</head>


<body>
  

<!-- ############################################## -->
<!-- outer container                                -->
<!-- ############################################## -->



<!-- ############################################## -->
<!-- header: title image loaded as background image via css -->
<!-- ############################################## -->

<div id="header"> 
<!--  <img class="title" src="figs/title.png"  width="100%"></img> -->
</div> 


<!-- ############################################## -->
<!-- Buttons                                        -->
<!-- ############################################## -->


<div id="startStopDiv"><img id="startStop" width="100%" 
     src="figs/buttonStop3_small.png" onclick="myStartStopFunction()"></img>
</div>

<div id="restartDiv"><img id="restart" width="100%" 
     src="figs/buttonRestart_small.png" onclick="myRestartFunction()"></img>
</div>

<div id="infoDiv"><img width="100%" 
     src="figs/infoBlue.png" onclick="showInfo()"></img>
</div>

<!--
<div id="lanePlusDiv"><button onclick="addLane()">
    Lane<br>++</button>
</div>
<div id="laneMinusDiv"><button onclick="subtractLane()">
    Lane<br>--</button>
</div>
-->

<div id="roadIDDiv"><button id="buttonRoadID" onclick="toggleRoadID()"></img>
Show road IDs</div>

<div id="vehIDDiv"><button id="buttonVehID" onclick="toggleVehID()"></img>
Show vehicle IDs</div>



<!-- ############################################## -->
<!-- choice boxes -->
<!-- ############################################## -->

<!-- "title" text counts as index, so valid options start with 1-->
<div id="priorityDiv">
    <select id="prioritySelect"
	    onchange="changeTrafficRules(this.selectedIndex-1)">
        <option value="" selected disabled hidden>Traffic Rules</option>
        <option> Horizontal Priority</option>
        <option> Right Priority</option>
        <option> Signalized</option>
    </select>
</div>


<!-- "title" text counts as index, so valid options start with 1-->
<div id="ODDiv">
    <select id="ODSelect"
<	    onchange="setTotalLaneNumber(this.selectedIndex)">
  <option value="" selected disabled hidden>Number of Lanes</option>
  <option> 1 main, 1 secondary lane </option>
  <option> 2 main, 1 secondary lanes</option>
  <option> 2 main, 2 secondary lanes</option>
  <option> 3 main, 1 secondary lanes</option>
  <option> 3 main, 2 secondary lanes</option>
  <option> 3 main, 3 secondary lanes</option>
</select>
</div>


<!-- ############################################## -->
<!-- redirects to other scenarios, defines myRedirectX -->
<!-- ############################################## -->

<script src="js/redirect.js" type="text/javascript"></script>

<div id="scenarios">
<center>
 <br>
<img width="17%" src="figs/iconRing_small.jpg" 
                 onclick="myRedirectRing()"></img>
<img width="19%" src="figs/iconOnrampFig_small.jpg" 
                 onclick="myRedirectOnramp()"></img>
<img width="19%" src="figs/iconOfframpFig_small.jpg" 
                 onclick="myRedirectOfframp()"></img>
<img width="19%" src="figs/iconRoadworksFig_small.jpg" 
                 onclick="myRedirectRoadworks()"></img>
<img width="19%" src="figs/iconUphillFig_small.jpg" 
                 onclick="myRedirectUphill()"></img>
<img width="20%" src="figs/iconRoutingFig_small.jpg" 
                 onclick="myRedirectRouting()"></img>
<img width="22%" src="figs/iconRoundabout_small.jpg" 
                 onclick="myRedirectRoundabout()"></img>
<img width="19%" src="figs/iconIntersection_small.jpg" 
                 onclick="myRedirectIntersection()"></img>
<img width="20%" src="figs/iconRampmeterFig_small.jpg" 
     onclick="myRedirectOnrampBaWue()"></img>
<a href="test2_bottleneck.html">Tests</a>
<!-- <a href="intersectionDevelop.html"><b>Dev</b></a>-->
</center>

</div> 


<!-- ############################################## -->
<!-- the actual simulation canvas -->
<!-- ############################################## -->

<!--  !!!  NO comments inside canvas spec, leads to DOS!!! -->
<!-- no width, height spec in canvas; overridden anyway -->

<div id="contents">
  <canvas id="canvas" 
          onmouseenter="handleMouseEnter(event)"
          onmousemove="handleMouseMove(event)"
          onmousedown="handleMouseDown(event)"
          onmouseup="handleMouseUp(event)" 
          onclick="handleClick(event)"
          onmouseout="cancelActivities(event)"
          style="border:1px solid #d3d3d3;">

    Your browser does not support the HTML5 canvas tag.
  </canvas>
</div>




<!-- ################################################# -->
<!-- Copyright/impressum                               -->
<!-- ################################################# -->

<!--<div id="impressum"> <a href="impressum.html">
  &copy; Martin Treiber</a></div>-->

<div id="impressum">
  <table class="infoTable"> <TR>
    <td> <a href="impressum.html"> &copy; Martin Treiber</a></td>
    <TD> <a href="https://github.com/movsim/traffic-simulation-de">
          Offline: sources at GitHub</a></TD>
  </TR></table>
</div>


<!-- ############################################## -->
<!-- General link list
<!-- ############################################## -->
     
<div id="link1Div">
  <table class="infoTable">
    <tr><td> <a href="https://www.movsim.org"> MovSim</a> </td></tr>
  </table>
</div>

<div id="link2Div">
  <table class="infoTable">
    <tr><td><a href = "http://traffic-flow-dynamics.org">
          Book "Traffic Flow Dynamics" </a></td></tr>
    <tr><td> <a href = "https://www.verkehrsdynamik.de">
	  Buch "Verkehrsdynamik"</a></td></tr>
  </table>
</div>



<!-- ################################################# -->
<!-- Sliders: The whole right-hand or bottom part
<!-- ################################################# -->

<div id="sliders">
<center>

<h3>Traffic Flow and General</h3>

<table id="mainTable" border="0" cellspacing="1" cellpadding="0" >

<tr>
  <td>Main Inflow</td>
  <td> <input id="slider_qIn" type="range" 
              min="0" max="2400" step="10"></td>
  <td> <div id="slider_qInVal"></div> </td>
</tr>

<tr>
  <td>Secondary Inflow</td>
  <td> <input id="slider_q2" type="range" 
              min="0" max="1200" step="10"></td>
  <td> <div id="slider_q2Val"></div> </td>
</tr>

<tr>
  <td>Percentage Right</td>
  <td> <input id="slider_fracRight" type="range" 
              min="0" max="100" step="1"></td>
  <td> <div id="slider_fracRightVal"></div> </td>
</tr>


<!-- only in development, crashes! -->


<tr>
  <td>Percentage Left</td>
  <td> <input id="slider_fracLeft" type="range" 
              min="0" max="100" step="1"></td>
  <td> <div id="slider_fracLeftVal"></div> </td>
</tr>




<tr>
  <td>Timelapse</td>
  <td> <input id="slider_timewarp" type="range" 
              min="0.2" max="20" step="0.1"></td>
  <td> <div id="slider_timewarpVal"></div> </td>
</tr>
</table>


<h3>Car-Following Behavior</h3>

<table id="mainTable" border="0" cellspacing="1" cellpadding="0" >

<tr>
  <td>Max Speed v</sub>0</td>
  <td> <input id="slider_IDM_v0" type="range" 
              min="20" max="160" step="1"></td>
  <td> <div id="slider_IDM_v0Val"></div> </td>
</tr>

<tr>
  <td>Time Gap T</td>
  <td> <input id="slider_IDM_T" type="range" 
              min="0.6" max="3" step="0.1"></td>
  <td> <div id="slider_IDM_TVal"></div> </td>
</tr>

<tr>
  <td class="important">Max Accel a</td>
  <td> <input id="slider_IDM_a" type="range" 
              min="0.3" max="4" step="0.1"></td>
  <td> <div id="slider_IDM_aVal"></div> </td>
</tr>
</table>

<!--
<h3>Lane-Changing Behavior</h3>

<table id="mainTable" border="0" cellspacing="1" cellpadding="0" >

<tr>
  <td>Politeness</td>
  <td> <input id="slider_MOBIL_p" type="range" 
              min="-0.2" max="1" step="0.1"></td>
  <td> <div id="slider_MOBIL_pVal"></div> </td>
</tr>

<tr>
  <td>LC Threshold</td>
  <td> <input id="slider_MOBIL_bThr" type="range" 
              min="-0.1" max="1" step="0.1"></td>
  <td> <div id="slider_MOBIL_bThrVal"></div> </td>
</tr>

<tr>
  <td>Right Bias Cars</td>
  <td> <input id="slider_MOBIL_bBiasRight_car" type="range" 
              min="-1" max="2" step="0.1"></td>
  <td> <div id="slider_MOBIL_bBiasRight_carVal"></div> </td>
</tr>

<tr>
  <td>Right Bias Trucks</td>
  <td> <input id="slider_MOBIL_bBiasRight_truck" type="range" 
              min="-1" max="2" step="0.1"></td>
  <td> <div id="slider_MOBIL_bBiasRight_truckVal"></div> </td>
</tr>
</table>
-->


<!-- ############################################## -->
<!-- info-text inside sliders-div (can be filled by showInfo())
<!-- ############################################## -->

<br>
<div id="infotext">
<h1>Intersection</h1>
<ul>
  <li>Standard scenario: not signalized priority and secondary road,
  only straight-ahead traffic</li>

  <li>Change the traffic rules and the number of lanes with the pulldown
    menus</li>

  <li>Change the size of the intersecting roads with the second menu</li>

  <li>Change the traffic and the origin-destination relations with
    the sliders</li>
    
  <li>Observe that, with Right Priority, traffic gets in a gridlock
  unless demand is very light. Resolve it by changing the traffic
  rules (right priority only makes sense for single-lane directional
    roads)</li>

  <li> In the mainroad and signalized scenarios, any remaining
  ambiguities (left-turning mainroad vehicles encounter mainroad
  vehicles in the 
  opposite drection, left turns if there are traffic lights) is
  resolved by the Right Priority rule
</ul>  
</div>

</center>
</div>   <!-- id="sliders">-->


<!-- ############################################## -->
<!-- Download
<!-- ############################################## -->

<div id="downloadDiv">
  <img id="download" src="figs/iconDownloadStart_small.png" width="100%"
       onclick="downloadCallback()"></img>
</div>




<!-- ############################################## -->
<!-- language switching
<!-- ############################################## -->

<div id="infoFlags">
<a href = "intersection.html">
 <img src="figs/flagUSA.png" width="45%" ></img>
</a>

<a href = "intersection_ger.html">
 <img src="figs/flagGerman.png" width="45%" ></img>
</a>
</div>



<!-- ########################################################## -->
<!-- specific scripts; position below any simulation elements ! -->
<!-- ########################################################## -->

<script src="js/seedrandom.min.js"></script> <!-- random w seed debug -->

<script src="js/timeView.js" type="text/javascript"></script>
<script src="js/displayText.js" type="text/javascript"></script>
<script src="js/media.js" type="text/javascript"></script>

<script src="js/control_gui.js"></script> 
<script src="js/canvas_gui.js"></script> 
<script src="js/TrafficObjects.js"></script> 
<script src="js/TrafficLightControlEditor.js"></script> 
<script src="js/colormanip.js"></script>

<script src="js/models.js"></script> 
<script src="js/vehicle.js"></script>

<script src="js/paths.js"></script>
<script src="js/road.js"></script>
<script src="js/debug.js"></script>
<script src="js/stationaryDetector.js"></script> 

<!-- PROJ--> <script src="js/intersection.js"></script> 

</body>
</html>
